<template>
	<view>
		<view class="flex align-center" @click="show=true">
			<text class="font-1 font-gray mr-1">{{title}}</text>
			<u-icon color="#bebebe" size="10" :name="show?'arrow-up-fill':'arrow-down-fill'"></u-icon>
		</view>
		<u-picker keyName="dictLabel" :closeOnClickOverlay="true" :show="show" :columns="[columns]" @close="show=false" @cancel="show=false" @confirm="onConfirm"></u-picker>
	</view>
</template>

<script>
	import {getDicts} from "@/api/system/dict.js"
	export default {
		name:"bg-dict",
		props:["name","value"],
		mounted(){
			this.getDictByName()
		},
		data() {
			return {
				columns:[],
				title:'请选择',
				show:false,
			};
		},
		methods:{
			getDictByName(){
				getDicts(this.name).then(res=>{
					this.columns = res.data;
					let find = this.columns.find(c=>c.dictCode == this.value)
					if (find){
						this.title = find.dictLabel
					}
				})
			},
			onConfirm({indexs, value, values}){
				this.show = false;
				this.title = value[0].dictLabel;
				this.$emit("update:value", value[0].dictValue)
			}
		},
		watch:{
			value(newVal, oldVal){
				let find = this.columns.find(c=>c.dictValue == newVal)
				if (find){
					this.title = find.dictLabel
				} else {
					this.title = ""
				}
			}
		}
	}
</script>

<style>

</style>